<template>
  <div class="sendLog">
    <el-container class="container">
      <el-aside width="200px" style="height: 100%;">
        <span class="gztlisttitle" @click="gztlistShow = !gztlistShow">工资条明细</span>
        <el-collapse-transition>
          <div v-show="gztlistShow">
            <ul>
              <li class="gztlist">
                123
              </li>
            </ul>
          </div>
        </el-collapse-transition>
      </el-aside>
      <el-container height="660px">
        <el-header height="668px" class="main">
          <div class="time">
            <div class="timeShow">
              <span>2020</span>
              <span>1</span>
              <el-button type="success" style="float: right; margin-top: 14px; padding: 8px 16px">导出</el-button>
            </div>
          </div>
          <div class="search-box">
            <div>
              <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </div>
          <div class="table-data">
            <el-table
            :data="tableData"
            height="250"
            border
            style="100%">
              <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="地址">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini">查看</el-button>
                       <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                       <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
            </el-table>
          </div>
        </el-header>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      gztlistShow: false,
      search: '',
      tableData: [
        {
          id: 1,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 3,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 4,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 5,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    handleEdit (index, row) {},
    handleDelete (index, row) {}
  }
}
</script>

<style scoped>
.sendLog{
  height:650px;
}
.container{
  height: 100%;
}
.el-header{
  background-color: #efefef;
}
.gztList-title {
  display: flex;
  width: 200px;
  height:60px;
  text-align: right;
  line-height: 60px;
  font-weight: bold;
}
/* 左边样式布置 */
.gztList-title-box{
  display: flex;
  width: 100%;
  height: 100%;
}
.gztlisttitle{
  display: block;
  width: 200px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  cursor:pointer;
}
.gztlist{
  display: block;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  cursor:pointer;
}
.gztlist:hover{
  background: #33AC3C;
  color: #fff;
}
/* 右边 */
.main{
  width: 100%;
  height: 650px;
}
.time{
  width: 100%;
  height: 100px;
  padding: 20px 5%;
}
.timeShow{
  background: #fff;
  line-height: 60px;
  padding: 0 5%;
}
.search-box{
  width: 100%;
  height: 40px;
  padding: 0 5%;
}
.table-data{
  width: 100%;
  height: 300px;
  padding: 20px 5%;
}
</style>
